<template>
    <div class="home">
        <el-container>
            <el-header class="header f fac">
                <div class="logo f fac">
                    <img src="../assets/images/logo.png" alt="">
                    <div>重庆农产品管理平台</div>
                </div>
                <div class="subject f fac">
                    <div class="block f fac fpc" v-for="menu in userInfo.menuList" :key="menu.path"
                        @click="$router.push(menu.path)" :class="{ 'active': $route.path.search(menu.path) != -1 }">{{
                            menu.name }}
                    </div>
                </div>
                <div class="info f fac">
                    <img src="../assets/images/logo.png" alt="">
                    <el-dropdown trigger="click" @command="handleCommand">
                        <span class="name f">{{ userInfo.userInfo.role_name }}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <!-- <el-dropdown-item command="1">全屏</el-dropdown-item> -->
                                <el-dropdown-item command="2">修改密码</el-dropdown-item>
                                <el-dropdown-item command="3">注销</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-container>
                <el-aside class="menu" width="2rem">
                    <el-menu :default-active="$route.path" router active-text-color="#fff" background-color="#414F67"
                        active-background-color="$ncpColor" text-color="#F7F8FB">
                        <template v-for="(menu, index) in menuList" :key="menu.path">
                            <el-sub-menu :index="menu.path" v-if="menu.children && menu.children.length > 0">
                                <template #title>
                                    <el-icon>
                                        <component :is="menu.icon" />
                                    </el-icon>
                                    <span>{{ menu.name }}</span>
                                </template>
                                <el-menu-item :index="item.path" v-for="item in menu.children" :key="item.path">{{ item.name
                                }}</el-menu-item>
                            </el-sub-menu>
                            <el-menu-item v-else :index="menu.path">
                                <el-icon>
                                    <component :is="menu.icon"></component>
                                </el-icon>
                                <span>{{ menu.name }}</span>
                            </el-menu-item>
                        </template>
                    </el-menu>
                </el-aside>
                <el-main class="main">
                    <Breadcrumb></Breadcrumb>
                    <router-view v-slot="{ Component }">
                        <!-- <keep-alive>
                            <component :is="Component" />
                        </keep-alive> -->
                        <component :is="Component" />
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <!-- 修改密码弹窗 -->
    <el-dialog v-model="dialogData.dialogVisible" :close-on-click-modal="false" width="3.6rem"
        :title="dialogData.dialogTitle">
        <el-form :model="dialogData.form" :rules="dialogData.formRules" hide-required-asterisk ref="refForm"
            label-postion="left" label-width="0.8rem">
            <el-form-item label="原密码" prop="password">
                <el-input type="password" show-password style="width: 2.2rem;" v-model.trim="dialogData.form.password" placeholder="请输入原密码" />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input type="password" show-password style="width: 2.2rem;" v-model.trim="dialogData.form.newPassword" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item label="确认密码" prop="reNewPassword">
                <el-input type="password" show-password style="width: 2.2rem;" v-model.trim="dialogData.form.reNewPassword" placeholder="请再次输入新密码" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span>
                <el-button @click="refForm.resetFields(); dialogData.dialogVisible = false; dialogData.form = {}">取消</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, reactive } from 'vue'
import userInfoStore from '@/stores/user'
import { useRoute, useRouter } from 'vue-router'
import Breadcrumb from '@/components/Breadcrumb.vue'
import http from '@/api/home'

const userInfo = userInfoStore()
const route = useRoute()
const router = useRouter()

userInfo.getUserInfo()

// 自定义校验规则
const validatePass = (rule, value, callback) => {
  if (value == '') {
    callback(new Error('请再次输入新密码'))
  } else if (value !== dialogData.form.newPassword) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}

// 弹框对象
const dialogData = reactive({
    // 是否显示
    dialogVisible: false,
    // 标题
    dialogTitle: '',
    // 表单数据 
    form: {},
    // 校验规则
    formRules: {
        password: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        newPassword: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
        reNewPassword: [{ required: true, validator: validatePass, trigger: 'blur' }]
    }
})

const refForm = ref()

// 菜单
const menuList = computed(() => {
    if (route.path.search('/home') != -1) {
        return userInfo.menuList.filter(item => item.path == '/home')[0]?.children
    } else if (route.path.search('/farm') != -1) {
        return userInfo.menuList.filter(item => item.path == '/farm')[0]?.children
    }
})

const handleCommand = (command) => {
    switch (command) {
        case '1':
            console.log(1);
            break;
        case '2':
            dialogData.dialogVisible = true
            dialogData.dialogTitle = "修改密码"
            break;
        case '3':
            ElMessageBox.confirm(
                '是否退出当前登录?',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                sessionStorage.removeItem('token')
                router.push('/login')
                userInfo.clearInfo()
            })
            break;
        default:
            break;
    }
}

// 提交（修改密码）
const submit = () => {
    refForm.value.validate((valid) => {
        if (valid) {
            http.updatePassword(dialogData.form).then(res => {
                ElMessage({ type: 'success', message: res.message })
                dialogData.dialogVisible = false
                ElMessageBox.confirm(
                    '用户信息已失效，请重新登录',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        type: 'warning',
                        showCancelButton: false,
                        showClose: false,
                        closeOnClickModal: false,
                        closeOnPressEscape: false
                    }
                ).then(() => {
                    sessionStorage.removeItem('token')
                    router.push('/login')
                    userInfo.clearInfo()
                })
            })
        }
    })
}
</script>

<style lang="scss" scoped>
.home {
    width: 100%;
    height: 100vh;
}

.header {
    width: 100%;
    height: 0.68rem;
    background-color: #414f67;
    color: #FEFEFE;
    font-size: 0.16rem;
    position: relative;

    .logo {
        width: 3rem;
        height: 100%;
        color: #FFF;
        font-size: 0.22rem;
        background-color: $ncpColor;
        position: absolute;
        top: 0;
        left: 0;

        img {
            width: 0.4rem;
            height: 0.4rem;
            margin-left: 0.24rem;
            margin-right: 0.16rem;
        }

        &::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            transform: translateX(100%);
            // right: -0.18rem;
            width: 0;
            height: 0;
            border-top: 0.68rem solid $ncpColor;
            border-right: 0.18rem solid transparent;
        }
    }

    .subject {
        height: 100%;
        margin-left: 3rem;

        .active {
            background-color: $ncpColor;
            position: relative;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                // left: -0.18rem;
                left: 0;
                transform: translateX(-100%);
                width: 0;
                height: 0;
                border-bottom: 0.68rem solid $ncpColor;
                border-left: 0.18rem solid transparent;
            }

            &::after {
                content: '';
                position: absolute;
                top: 0;
                // right: -0.18rem;
                right: 0;
                transform: translateX(100%);
                width: 0;
                height: 0;
                border-top: 0.68rem solid $ncpColor;
                border-right: 0.18rem solid transparent;
            }
        }

        .block {
            width: 0.84rem;
            height: 100%;
            margin: 0 0.18rem;
            cursor: pointer;
        }
    }

    .info {
        position: absolute;
        top: 0;
        right: 0.16rem;
        // width: 1.5rem;
        width: fit-content;
        height: 100%;
        color: #fff;

        img {
            width: 0.32rem;
            height: 0.32rem;
            border-radius: 100%;
            margin-left: 0.24rem;
            margin-right: 0.08rem;
        }

        .name {
            color: #FEFEFE;
        }
    }
}

.menu {
    height: calc(100vh - 0.68rem);

    .el-menu {
        height: 100%;
    }

    .el-menu-item.is-active {
        background-color: $ncpColor;
    }
}

.main {
    background-color: #eff0f2;
    padding: 0.2rem;
}</style>